<template>
	<view class="main">
		<view class="all">
			<view class="logo">
				<image :src="loginLogo" class="logoImage"></image>
			</view>
			<view class="inputs">
				<view class="inputs_l">
					<image src="../../../static/images/phone.png" mode="aspectFit"></image>
				</view>
				<view class="inputs_r">
					<input type="text" :placeholder="i18n.login.phone" v-model="account" />
				</view>
			</view>
			<view class="inputs">
				<view class="inputs_l">
					<image src="../../../static/images/pwd.png" mode="aspectFit"></image>
				</view>
				<view class="inputs_r">
					<input type="password" :placeholder="i18n.login.pwd" v-model="pwd" />
				</view>
			</view>
			<view class="inputs">
				<view class="input_code">
					<image src="../../../static/images/code.png" mode="aspectFit"></image>
					<input type="text" :placeholder="i18n.login.code" v-model="code" />
				</view>
				<view class="code_img" @click="getcodeimg">
					<image :src="codeimg" mode="aspectFit"></image>
				</view>
			</view>
			<view class="langes">
				<view class="lang_l">
					<image src="../../../static/images/loginlang.png" mode="aspectFit"></image>
					<text>{{i18n.login.language}}</text>
				</view>
				<view class="lang_r" @click="changelang">
					<text>{{txt}}</text>
					<u-icon name="arrow-right" size="18"></u-icon>
				</view>
			</view>
		</view>
		<view class="goregister" @click="router()">
			{{i18n.login.register}}
		</view>
		<view class="button" @click="handlogin">
			{{i18n.login.login}}
		</view>
		<u-select v-model="show" :list="dataList" @confirm="confirm"></u-select>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				account: '',
				pwd: '',
				code: '',
				key: '',
				codeimg: '',
				txt: '',
				show: false,
				dataList: [{
						value: 1,
						imgUrl: '../../../static/images/cn.png',
						label: '简体中文',
						language: 'zh-CN'
					},
					{
						value: 2,
						imgUrl: '../../../static/images/en.png',
						label: 'English',
						language: 'en-US'
					},

				],
				loginLogo: ""
			};
		},
		onLoad() {
			this.getcodeimg();
			this.getLoginPic();
			
			if (uni.getStorageSync('index') == '') {
				this.txt = '中文简体'
			} else {
				this.txt = this.dataList[uni.getStorageSync('index')].label
			}
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onShow() {
			this.lang()
			let items = this.dataList;
			let ind = uni.getStorageSync('index'),
				lang = uni.getStorageSync('select');
			// 判断选择的语言
			if (lang) {
				this.$i18n.locale = lang;
			} else {
				this.$i18n.locale = 'zh-CN';
			}
		},
		methods: {
			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
			changelang() {
				this.show = true
			},
			router() {
				uni.navigateTo({
					url: '../register/register'
				})
			},
			//登陆
			handlogin() {
				
				global.$http.request({
					url: '/api/admin/merchant/login',
					data: {
						account: this.account,
						captcha: {
							captchaVerification: "",
							secretKey: "",
							token: ""
						},
						code: this.code,
						key: this.key,
						pwd: this.pwd
					}
				}).then(res => {
					console.log(res);
					if (res == undefined) {
						this.getcodeimg()
					}else if (res.data.code == 200) {
						uni.showToast({
							title: '登陆成功',
							icon: 'none',
							duration: 1000
						})
						uni.setStorageSync('token',res.data.data.token)
						uni.setStorageSync('userinfo',res.data.data)
						this.getuserinfo()
						setTimeout(function(){
							uni.switchTab({
								url:'../../indexs/index/index',
							})
							
						},1000)
					}
				})
			},
			//获取图片验证码
			getcodeimg() {
				global.$http.request({
					url: '/api/admin/validate/code/get',
					method: 'GET',
				}).then(res => {
					if (res.data.code == 200) {
						this.codeimg = res.data.data.code
						this.key = res.data.data.key

					}
				})
			},
			//获取logo
			getLoginPic() {
				global.$http.request({
					url: '/api/admin/merchant/getLoginPic',
					method: 'GET',
				}).then(res => {
					if (res.data.code == 200) {
						this.loginLogo = res.data.data.loginLogo
						var backgroundImage = res.data.data.backgroundImage
					}
				})
			},
			getuserinfo() {
				global.$http.request({
					url: '/api/admin/merchant/getAdminInfoByToken',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
				}).then(res => {
					if (res.data.code == 200) {
			console.log(res.data.data);
					}
				})
			},
			confirm(e) {
				console.log(e);
				this.txt = e[0].label
				let _this = this;
				let items = _this.dataList;
				for (let i = 0; i < items.length; i++) {
					if (items[i].label == e[0].label) {
						// console.log(e.target.value);
						// console.log(items[i].value);
						// 存储选择的下标
						uni.setStorageSync('index', i);
						// 存储选择的语言
						uni.setStorageSync('select', items[i].language);
						_this.$i18n.locale = items[i].language;
						// tabbar多语言
						break;
					}
				}
			},



		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;

		.main {
			width: 750rpx;
			height: 100%;

			.all {
				display: flex;
				flex-direction: column;
				align-items: center;

				.logo {
					margin-top: 167rpx;
					font-size: 140rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					padding-bottom: 58rpx;
					.logoImage {
					    width: 130px;
					    height: 130px;
					}
				}

				.inputs {
					width: 604rpx;
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #f7f7f7;

					.inputs_l {
						image {
							width: 27rpx;
							max-height: 43rpx;
						}

					}

					.input_code {

						font-size: 32rpx;
						font-family: PingFang;
						font-weight: 500;
						display: flex;
						align-items: center;

						image {
							width: 31rpx;
							max-height: 39rpx;
						}

						input {
							padding: 34rpx 30rpx;
						}
					}

					.code_img {

						padding: 34rpx 30rpx;

						image {
							width: 173rpx;
							height: 63rpx;
						}
					}

					.inputs_r {
						padding: 34rpx 30rpx;
						font-size: 32rpx;
						font-family: PingFang;
						font-weight: 500;
					}
				}

				.langes {
					width: 604rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #f7f7f7;

					.lang_l {
						display: flex;
						align-items: center;

						text {
							display: block;
							padding: 34rpx 30rpx;
						}

						image {
							width: 27rpx;
							height: 43rpx;
						}

						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.goregister {
				padding: 40rpx 71rpx;
				display: flex;
				justify-content: flex-start;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #304156;
			}

			.button {

				width: 630rpx;
				margin: 98rpx auto;
				height: 98rpx;
				line-height: 98rpx;
				text-align: center;
				background: #304156;
				border-radius: 49px;


				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
